<template>
  <div class="main-window">
    <fc-designer-mobile ref="designer" :theme="theme" :config="config" height="100vh" @save="handleSave" />
    <!-- <form-create name="form" :rule="rules"></form-create> -->
  </div>
</template>

<script setup lang="ts">
// 文档： https://pro.form-create.com/doc/props
import { ref, onMounted } from 'vue';
type ThemeType = 'purple' | 'orange' | 'pink' | 'green' | 'default';
const theme = ref<ThemeType>('default');
const designer = ref();
const config = ref({
  showSaveBtn: true
});

const handleSave = ({ rule, options } : { rule: any, options: any }) => {
  console.log('保存成功', { rule, options })
}
onMounted(() => {
  if(!designer.value) return;
  designer.value.setOptions(`{\"form\":{\"labelWidth\":\"6.2em\",\"colon\":false},\"resetBtn\":{\"show\":false,\"innerText\":\"重置\"},\"submitBtn\":{\"show\":true,\"innerText\":\"提交\"}}`);
  designer.value.setRule(`[{\"type\":\"input\",\"field\":\"Fouemaxbleduacc\",\"title\":\"多行输入333框\",\"$required\":false,\"props\":{\"type\":\"textarea\"},\"_fc_id\":\"id_Fn2emaxbleduadc\",\"name\":\"ref_Fv9xmaxbleduaec\",\"display\":true,\"hidden\":false,\"_fc_drag_tag\":\"textarea\"},{\"type\":\"checkbox\",\"field\":\"F3ejmaxblexzafc\",\"title\":\"多选框\",\"effect\":{\"fetch\":\"\"},\"$required\":false,\"optionsTo\":\"props.options\",\"options\":[{\"text\":\"选项01\",\"value\":\"1\"},{\"text\":\"选项02\",\"value\":\"2\"},{\"text\":\"选项03\",\"value\":\"3\"}],\"_fc_id\":\"id_F5zxmaxbley0agc\",\"name\":\"ref_Fddgmaxbley0ahc\",\"display\":true,\"hidden\":false,\"_fc_drag_tag\":\"checkbox\"},{\"type\":\"rate\",\"field\":\"Fsxgmaxblfphaic\",\"title\":\"评分\",\"$required\":false,\"_fc_id\":\"id_Fgfrmaxblfphajc\",\"name\":\"ref_F7hbmaxblfphakc\",\"display\":true,\"hidden\":false,\"_fc_drag_tag\":\"rate\"},{\"type\":\"cascader\",\"field\":\"F0yomaxblgdnalc\",\"title\":\"级联选择器\",\"effect\":{\"fetch\":\"\"},\"$required\":false,\"props\":{\"options\":[{\"text\":\"选项201\",\"value\":\"1\",\"children\":[{\"text\":\"选项1-101\",\"value\":\"2\",\"children\":[{\"text\":\"选项1-1-01\",\"value\":\"3\"},{\"text\":\"选项1-1-02\",\"value\":\"4\"},{\"text\":\"选项1-1-03\",\"value\":\"5\"}]},{\"text\":\"选项1-102\",\"value\":\"6\",\"children\":[{\"text\":\"选项1-2-01\",\"value\":\"7\"},{\"text\":\"选项1-2-02\",\"value\":\"8\"},{\"text\":\"选项1-2-03\",\"value\":\"9\"}]},{\"text\":\"选项1-103\",\"value\":\"10\",\"children\":[{\"text\":\"选项1-3-01\",\"value\":\"11\"},{\"text\":\"选项1-3-02\",\"value\":\"12\"},{\"text\":\"选项1-3-03\",\"value\":\"13\"}]}]},{\"text\":\"选项202\",\"value\":\"14\",\"children\":[{\"text\":\"选项2-101\",\"value\":\"15\",\"children\":[{\"text\":\"选项2-1-01\",\"value\":\"16\"},{\"text\":\"选项2-1-02\",\"value\":\"17\"},{\"text\":\"选项2-1-03\",\"value\":\"18\"}]},{\"text\":\"选项2-102\",\"value\":\"19\",\"children\":[{\"text\":\"选项2-2-01\",\"value\":\"20\"},{\"text\":\"选项2-2-02\",\"value\":\"21\"},{\"text\":\"选项2-2-03\",\"value\":\"22\"}]},{\"text\":\"选项2-103\",\"value\":\"23\",\"children\":[{\"text\":\"选项2-3-01\",\"value\":\"24\"},{\"text\":\"选项2-3-02\",\"value\":\"25\"},{\"text\":\"选项2-3-03\",\"value\":\"26\"}]}]},{\"text\":\"选项203\",\"value\":\"27\",\"children\":[{\"text\":\"选项3-101\",\"value\":\"28\",\"children\":[{\"text\":\"选项3-1-01\",\"value\":\"29\"},{\"text\":\"选项3-1-02\",\"value\":\"30\"},{\"text\":\"选项3-1-03\",\"value\":\"31\"}]},{\"text\":\"选项3-102\",\"value\":\"32\",\"children\":[{\"text\":\"选项3-2-01\",\"value\":\"33\"},{\"text\":\"选项3-2-02\",\"value\":\"34\"},{\"text\":\"选项3-2-03\",\"value\":\"35\"}]},{\"text\":\"选项3-103\",\"value\":\"36\",\"children\":[{\"text\":\"选项3-3-01\",\"value\":\"37\"},{\"text\":\"选项3-3-02\",\"value\":\"38\"},{\"text\":\"选项3-3-03\",\"value\":\"39\"}]}]}]},\"_fc_id\":\"id_Fze1maxblgdnamc\",\"name\":\"ref_F6nlmaxblgdnanc\",\"display\":true,\"hidden\":false,\"_fc_drag_tag\":\"cascader\"},{\"type\":\"datePicker\",\"field\":\"Fzlnmaxblh4yaoc\",\"title\":\"日期\",\"$required\":false,\"_fc_id\":\"id_Fc0bmaxblh4yapc\",\"name\":\"ref_F4jbmaxblh4yaqc\",\"display\":true,\"hidden\":false,\"_fc_drag_tag\":\"datePicker\"}]`);
});
</script>

<style scoped>
.main-window {
  height: 100%;
  width: 100%;
}
</style>
